<template>
  <div class="masonry-layout">
    <!-- 内容卡片列表 - 瀑布流布局 -->
    <div 
      v-infinite-scroll="loadMore" 
      :infinite-scroll-disabled="loading" 
      :infinite-scroll-distance="scrollDistance"
      class="masonry-container"
    >
      <div class="masonry-column" v-for="(column, index) in masonryColumns" :key="index">
        <slot name="item" v-for="item in column" :item="item"></slot>
      </div>
    </div>

    <!-- 加载状态提示 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <span class="loading-text">加载更多内容中...</span>
    </div>

    <!-- 没有更多数据提示 -->
    <div v-if="noMore" class="no-more">
      <span>已加载全部内容</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  },
  columnCount: {
    type: Number,
    default: 3
  },
  scrollDistance: {
    type: Number,
    default: 100
  },
  loading: {
    type: Boolean,
    default: false
  },
  noMore: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['load-more']);

// 响应式列数
const responsiveColumnCount = ref(props.columnCount);

// 更新列数函数 - 增强的响应式检测
const updateColumnCount = () => {
  if (typeof window === 'undefined') return;
  const width = window.innerWidth;
  if (width < 414) responsiveColumnCount.value = 1; // 小屏幕手机
  else if (width < 640) responsiveColumnCount.value = 1; // 大屏幕手机
  else if (width < 768) responsiveColumnCount.value = 2; // 平板竖屏
  else if (width < 1024) responsiveColumnCount.value = 2; // 平板横屏
  else responsiveColumnCount.value = props.columnCount; // 桌面
};

// 将卡片分配到瀑布流列中
const masonryColumns = computed(() => {
  const columns = Array.from({ length: responsiveColumnCount.value }, () => []);
  props.items.forEach((item, index) => {
    // 找到当前最短的列
    const shortestColumnIndex = columns.reduce((shortestIndex, column, currentIndex) => {
      return column.length < columns[shortestIndex].length ? currentIndex : shortestIndex;
    }, 0);
    
    columns[shortestColumnIndex].push(item);
  });
  return columns;
});

// 加载更多数据
const loadMore = () => {
  if (props.loading || props.noMore) return;
  emit('load-more');
};

// 监听窗口大小变化
onMounted(() => {
  updateColumnCount();
  window.addEventListener('resize', updateColumnCount);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateColumnCount);
});
</script>

<style scoped>
.masonry-layout {
  width: 100%;
}

.masonry-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  transition: gap 0.3s ease;
}

.masonry-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  flex-direction: column;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #667eea;
  font-weight: 500;
}

/* 没有更多数据 */
.no-more {
  text-align: center;
  padding: 30px;
  color: #909399;
  font-style: italic;
}

/* 增强的响应式设计 */
@media (max-width: 1200px) {
  .masonry-container {
    gap: 18px;
  }
}

@media (max-width: 1024px) {
  .masonry-container {
    gap: 16px;
  }
  
  .loading-container,
  .no-more {
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .masonry-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .loading-spinner {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 576px) {
  .masonry-container {
    margin-bottom: 15px;
  }
  
  .loading-container,
  .no-more {
    padding: 20px;
  }
  
  .loading-spinner {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 414px) {
  .masonry-container {
    gap: 12px;
  }
  
  .loading-text {
    font-size: 0.9rem;
  }
  
  .no-more {
    font-size: 0.85rem;
  }
}
</style>